import { FC, CSSProperties } from "react";
import i18n from "i18n-js";
import { GStyleSheet } from "@/utils/DarkMode";
import { View, Text, Image } from "@tarojs/components";
import findIcon from '../assets/add_icon_find.png';
import './RadarTitle.less';

const dstyles = GStyleSheet.create({
  findView: {
    width: "100%",
    justifyContent: "flex-start",
    marginBottom: 20
  },
});

interface IProps {
  title?: string;
  icon?: string;
  style?: CSSProperties;
}

const RadarTitle: FC<IProps> = ({ style, icon = findIcon, title = i18n.t('DISCOVERING_DEVICE') }) => {
  const styles = dstyles.useDynamicStyle();
  return (
    <View className='centerFlex' style={{ ...styles.findView, ...style }}>
      <Image src={icon} className='radar' />
      <Text>{title}</Text>
    </View>
  );
};

export default RadarTitle;
